<template>
  <div>
    <div class="detail-info" style="margin-top: 50px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="180px">
          <el-form-item label="内容名称" required>
            <el-input v-model="infoForm.name" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="分公司" v-if="isBranch" required>
            <el-select v-model="infoForm.branchId" style="width: 220px" filterable clearable>
              <el-option
                v-for="item in branchList"
                :label="item.branch_Name"
                :value="item.branch_Id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分公司" v-else>
            <el-input v-model="this.branchName" style="width: 220px" disabled></el-input>
          </el-form-item>
          <el-form-item label="内容形式" required>
            <el-select v-model="infoForm.contentMode" @change="modeChange(infoForm.contentMode)">
              <el-option label="商品" value="1"></el-option>
              <el-option label="跳转链接" value="2"></el-option>
              <el-option label="跳转页面" value="3"></el-option>
              <el-option label="新品推荐" value="4"></el-option>
              <el-option label="热销推荐" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="infoForm.titleVice" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="主广告语" prop="advertMain" v-show="infoForm.contentMode === '1'">
            <el-input v-model="infoForm.advertMain" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="副广告语" prop="advertVice" v-show="infoForm.contentMode === '1'">
            <el-input v-model="infoForm.advertVice" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="内容图片" v-show="infoForm.contentMode === '1'">
            <el-upload
              class="avatar-uploader"
              :action="imgAddress"
              name="imageFile"
              :show-file-list="false"
              :on-success="success">
              <img v-if="this.imageUrl" :src="this.imgHost + '/' + this.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!--<el-form-item label="排序方式" v-show="infoForm.contentMode === '1'">-->
            <!--<el-radio-group v-model="infoForm.sortType" @change="sortChange">-->
              <!--<el-radio :label="1">常规</el-radio>-->
              <!--<el-radio :label="2">品牌</el-radio>-->
              <!--<el-radio :label="3">一级分类</el-radio>-->
              <!--<el-radio :label="4">二级分类</el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
          <el-form-item label="内容备注">
            <el-input  type="textarea" v-model="infoForm.comment" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <h4>上线信息</h4>
        <el-form :model="lineForm"  label-width="180px">
          <el-form-item label="上线时间" required>
            <el-select v-model="lineForm.onlineMode" placeholder="请选择" @change="change">
              <el-option label="审核通过后生效" value="1"></el-option>
              <!--<el-option label="定时生效" value="2"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="定时时间" v-show="lineForm.onlineMode === '2'" required>
            <el-date-picker
              @change="timeChange"
              v-model="lineForm.onlineTime"
              type="datetime"
              value-format="yyyy-MM-dd-HH-mm-ss"
              :picker-options="pickerOptions"
              style="width: 220px"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="上线说明">
            <el-input  type="textarea" v-model="lineForm.onlineComment" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item" v-if="infoForm.contentMode === '1' || infoForm.contentMode === '4' || infoForm.contentMode === '5'">
        <h4>内容信息</h4>
        <div style="margin:20px">
          <el-button type="success" @click="simpleCheck">选择单品 <i class="el-icon-document"></i></el-button>
          <el-button type="success" v-show="isSort" @click="checkCombo">选择套餐 <i class="el-icon-menu"></i></el-button>
          <el-col :span="2" class="daoru">
            <el-upload class="upload-demo"
                       action="123"
                       :before-upload="beforeUpload1"
                       :file-list="fileList1"
                       accept=".xlsx,.xls">
              <el-button :disabled="primaryDisabled" type="primary">导入单品</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2" class="daoru" v-show="isSort">
            <el-upload class="upload-demo"
                       action="123"
                       :before-upload="beforeUpload2"
                       :file-list="fileList2"
                       accept=".xlsx,.xls">
              <el-button :disabled="primaryDisabled" type="primary">导入套餐</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" style="">
              <a style="text-decoration:none; color:#fff" href="/static/template/内容模板.xlsx">下载模板</a>
            </el-button>
          </el-col>
        </div>
        <!--<el-form :model="contentForm" :inline="true" label-width="88px">-->
          <!--<el-form-item label="商品ID">-->
            <!--<el-input v-model="contentForm.a"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="商品名称">-->
            <!--<el-input v-model="contentForm.a"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item>-->
            <!--<el-button type="primary" @click="contentQuery">查询</el-button>-->
          <!--</el-form-item>-->
        <!--</el-form>-->
        <div>
          <el-button @click="lotDelete">批量删除</el-button>
        </div>
        <el-table
          :data="contentTable"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="productId"
            align="center"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="productName"
            align="center"
            label="名称">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center">
            <template scope="scope">
              <el-button v-show="scope.$index !== 0" @click="top(scope.$index, scope.row)" size="small">置顶</el-button>
              <el-button v-show="scope.$index !== 0" @click="moveT(scope.$index, scope.row)" size="small">上移</el-button>
              <el-button v-show="scope.$index !== (contentTable.length - 1)" @click="moveB(scope.$index, scope.row)" size="small">下移</el-button>
              <el-button @click="omit(scope.$index, scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="form-item" v-if="infoForm.contentMode === '2'">
        <h4>内容信息</h4>
        <el-form :model="linkForm" :inline="true" label-width="88px" style="margin-bottom: 50px">
          <el-form-item label="跳转链接">
            <el-input v-model="linkForm.link" placeholder="请输入有效的跳转链接" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="checkLink(linkForm.link)">验证链接</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item" v-if="infoForm.contentMode === '3'">
        <h4>内容信息</h4>
        <el-form :model="viewForm" :inline="true" label-width="180px" style="margin-bottom: 50px">
          <el-form-item label="PC页面">
            <el-select v-model="viewForm.pc" clearable>
              <el-option
                v-for="item in pcList"
                :label="item.name"
                :value="item.markId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="惠配通页面">
            <el-select v-model="viewForm.hpt" clearable>
              <el-option
                v-for="item in hptList"
                :label="item.name"
                :value="item.markId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="惠付通页面">
            <el-select v-model="viewForm.hft" clearable>
              <el-option
                v-for="item in hftList"
                :label="item.name"
                :value="item.markId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="margin: 100px auto; width: 17%">
      <el-button @click="submit($event, 'infoForm')" type="success">提交</el-button>
      <el-button v-show="isDraft" @click="submit($event, 'infoForm')" type="warning">暂存</el-button>
      <el-button @click="cancel" type="danger">取消</el-button>
    </div>
    <!--选择单品弹窗-->
    <el-dialog class="dialog" title="选择商品" :visible.sync="dialogSimple">
      <el-form style="overflow: hidden; margin-top: 30px" :inline="true" :model="formSimple">
        <el-form-item label="商品分类">
          <el-select v-model="formSimple.type1" style="width: 150px" filterable clearable @change="checkType2(formSimple.type1)">
            <el-option
              v-for="item in formSimple.productList1"
              :label="item.cateName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSimple.type2" style="width: 150px" filterable clearable @change="checkType3(formSimple.type2)">
            <el-option
              v-for="item in formSimple.productList2"
              :label="item.cateName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSimple.type3" style="width: 150px" filterable clearable>
            <el-option
              v-for="item in formSimple.productList3"
              :label="item.cateName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌">
          <el-select v-model="formSimple.brand" style="width: 150px" filterable clearable>
            <el-option
              v-for="item in formSimple.brandList"
              :label="item.brandName"
              :value="item.brandId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ID" placeholder="请输入商品ID">
          <el-input style="width: 100px" v-model="formSimple.ID"></el-input>
        </el-form-item>
        <el-form-item label="名称" placeholder="请查询的商品名称">
          <el-input style="width: 120px" v-model="formSimple.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="simpleList">搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="lotAdd">批量添加</el-button>
      </div>
      <el-table
        :data="tableData_S.content"
        v-loading="tableData_S.isLoading"
        height="200"
        ref="multipleTable"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @select-all="handleSelectionChange_S"
        @selection-change="handleChange_S">
        <el-table-column
          type="selection"
          :selectable="isCheck"
          width="55">
        </el-table-column>
        <el-table-column
          prop="hmpId"
          label="ID"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="hmpName"
          label="名称"
          align="center"
          width="300">
        </el-table-column>
        <!--<el-table-module-->
          <!--prop="remarks"-->
          <!--label="是否添加"-->
          <!--align="center"-->
          <!--width="">-->
        <!--</el-table-module>-->
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button v-show="scope.row.name === 'add'" @click="add(scope.$index, scope.row, $event)" size="small">添加</el-button>
            <el-button v-show="scope.row.name === 'cancel'" @click="celadd(scope.$index, scope.row, $event)" size="small">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_S"
        :page-size="tableData_S.pageSize"
        layout="total, prev, pager, next"
        :total="Number(tableData_S.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
    <!--选择套餐-->
    <el-dialog class="dialog" title="选择套餐" :visible.sync="dialogCombo">
      <el-form style="overflow: hidden; margin-top: 20px" :inline="true" :model="formCombo">
        <el-form-item label="ID" placeholder="请输入商品ID">
          <el-input style="width: 120px" v-model="formCombo.ID"></el-input>
        </el-form-item>
        <el-form-item label="名称" placeholder="请查询的商品名称">
          <el-input style="width: 200px" v-model="formCombo.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="comboList">搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="lotAdd_T">批量添加</el-button>
      </div>
      <el-table
        :data="tableData_T.content"
        v-loading="tableData_T.isLoading"
        height="200"
        ref="multipleTable2"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @select-all="handleSelectionChange_T"
        @selection-change="handleChange_T">
        <el-table-column
          type="selection"
          :selectable="isCheck_T"
          width="55">
        </el-table-column>
        <el-table-column
          prop="promotion_id"
          label="ID"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="promotion_name"
          label="名称"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button v-show="scope.row.name === 'add'" @click="add_T(scope.$index, scope.row, $event)" size="small">添加</el-button>
            <el-button v-show="scope.row.name === 'cancel'" @click="add_T(scope.$index, scope.row, $event)" size="small">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_T"
        :page-size="tableData_T.pageSize"
        layout="total, prev, pager, next"
        :total="Number(tableData_T.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
  import { apiHost, apiURL } from '../../../config/settings.js'
  import { getInfo, column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  import axios from 'axios'
  export default {
    mixins: [mixins],
    data () {
      var mainTest = (rule, value, callback) => { // 主广告语验证
        const reg = new RegExp('^[\u2E80-\u9FFF]+$', 'g')
        if (value && !reg.test(value)) {
          return callback(new Error('主广告语只能包含文字'))
        } else {
          callback()
        }
      }
      var viceTest = (rule, value, callback) => { // 副广告语验证
        // const reg = new RegExp('^[\u4e00-\u9fa50-9]+$')
        const reg = /^(([\u2E80-\u9FFF]+)|([\u4e00-\u9fa50-9]+\.[\u4e00-\u9fa50-9]*[\u4e00-\u9fa51-9][\u4e00-\u9fa50-9]*)|([\u4e00-\u9fa50-9]*[\u4e00-\u9fa51-9][\u4e00-\u9fa50-9]*\.[\u4e00-\u9fa50-9]+)|([\u4e00-\u9fa50-9]*[\u4e00-\u9fa51-9][\u4e00-\u9fa50-9]*))$/
        if (value === '') {
          callback()
        } else {
          if (value[0] === '|') {
            return callback(new Error('副标题不能以”|“开头'))
          } else {
            var v = value.split('|')
            console.log(v)
            if (v.length > 2) {
              return callback(new Error('副广告语不能超过2行'))
            } else {
              for (let index = 0; index < v.length; index++) {
                const element = v[index]
                if (!reg.test(element)) {
                  console.log('错误')
                  return callback(new Error('副广告语只能包含文字和数字'))
                } else {
                  if (element.length > 8) {
                    return callback(new Error('长度不能超过8个字符'))
                  } else if (element.length === 0) {
                    return callback(new Error('长度不能少于1个字符'))
                  } else {
                    console.log('正确')
                    if (index === v.length - 1) {
                      callback()
                    }
                  }
                }
              }
            }
          }
        }
      }
      return {
        rules: {
          advertMain: [ // 主广告语
            { min: 0, max: 6, message: '长度不能超过6个字符', trigger: 'blur' },
            { validator: mainTest, trigger: 'blur' }
          ],
          advertVice: [ // 副广告语
            // { min: 0, max: 10, message: '长度不能超过10个字符', trigger: 'blur' },
            { validator: viceTest, trigger: 'blur' }
          ]
        },
        // 导入表格
        fileList1: [],
        fileList2: [],
        fileUrl: '',
        primaryDisabled: false,
        imgHost: '',
        imgAddress: '',
        imageUrl: '',
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < new Date().getTime() - 8.64e7
          }
        },
        isDraft: true,
        data: '',
//      基本信息
        infoForm: {
          titleVice: '',
          advertMain: '',
          advertVice: '',
          advertImage: '',
          branchId: '',
          comment: '',
          contentMode: '1',
          name: '',
          sortType: 1
        },
//      上线信息
        lineForm: {
          onlineMode: '1',
          onlineComment: '',
          onlineTime: ''
        },
//      内容信息： 链接
        linkForm: {
          link: ''
        },
//      内容信息： 表格
        contentTable: [],
        all: [],
//      内容信息： 页面
        viewForm: {
          pc: '',
          hft: '',
          hpt: ''
        },
        pcList: [],
        hptList: [],
        hftList: [],
//      选择单品弹窗
        dialogSimple: false,
        formSimple: {
          brandList: [],
          productList1: [],
          productList2: [],
          productList3: [],
          type1: '',
          type2: '',
          type3: '',
          brand: '',
          ID: '',
          name: ''
        },
        tableData_S: {
          content: [],
          total: '',
          currentPage: 1,
          pageSize: 10,
          all: [],
          isLoading: false
        },
//      选择套餐弹窗
        isCombo: true,
        isSort: true,
        dialogCombo: false,
        formCombo: {
          name: '',
          ID: ''
        },
        tableData_T: {
          content: [],
          total: '',
          currentPage: 1,
          pageSize: 10,
          all: [],
          isLoading: false
        }
      }
    },
    methods: {
      sortChange (val) {
        if (val !== 1) {
          this.isSort = false
        } else {
          this.isSort = true
        }
      },
      beforeUpload1 (file) {
        if (this.isBranch && this.infoForm.branchId === '') {
          this.$message({
            showClose: true,
            message: '请先选择分公司',
            type: 'error'
          })
          return false
        }
        this.$store.dispatch('pageLoading', true)
        const newBranchId = this.branchId === 1 ? this.infoForm.branchId : this.branchId
        let fd = new window.FormData()
        fd.append('file', file)
        fd.append('branchId', newBranchId)
        fd.append('importType', 1)
        axios({
          method: 'post',
          url: this.fileUrl,
          data: fd
        }).then(res => {
          console.log(res)
          console.log(res.data.content)
          console.log('a')
          if (res.data.code === 0 && res.data.content.length !== 0) {
            this.$store.dispatch('pageLoading', false)
            this.contentTable = []
            const resData = res.data.content
            resData.forEach((item, index) => {
              this.contentTable.unshift(item)
            })
          } else {
            this.$store.dispatch('pageLoading', false)
            this.$message({
              showClose: true,
              message: '未找到，请输入正确的ID',
              type: 'error'
            })
          }
        }).catch(res => {
          this.$store.dispatch('pageLoading', false)
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        })
        return true
      },  // 导入
      beforeUpload2 (file) {
        if (this.isBranch && this.infoForm.branchId === '') {
          this.$message({
            showClose: true,
            message: '请先选择分公司',
            type: 'error'
          })
          return false
        }
        this.$store.dispatch('pageLoading', true)
        let fd = new window.FormData()
        const newBranchId2 = this.branchId === 1 ? this.infoForm.branchId : this.branchId
        fd.append('file', file)
        fd.append('branchId', newBranchId2)
        fd.append('importType', 2)
        axios({
          method: 'post',
          url: this.fileUrl,
          data: fd
        }).then(res => {
          if (res.data.code === 0 && res.data.content.length !== 0) {
            this.$store.dispatch('pageLoading', false)
            this.contentTable = []
            const resData = res.data.content
            resData.forEach((item, index) => {
              this.contentTable.unshift(item)
            })
          } else {
            this.$store.dispatch('pageLoading', false)
            this.$message({
              showClose: true,
              message: '未找到，请输入正确的ID',
              type: 'error'
            })
          }
        }).catch(res => {
          this.$store.dispatch('pageLoading', false)
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        })
        return true
      },  // 导入
      success (res) {
        this.imageUrl = res.content.imageUrl
      }, // 上传图片成功
      modeChange (val) {
        if (val === '4' || val === '5') {
          this.isCombo = false
        } else {
          this.isCombo = true
        }
      },
      timeChange (val) {
        this.lineForm.onlineTime = val
      },  // 上线时间变化
      change (val) {
        if (this.lineForm.onlineMode === '1') {
          this.lineForm.onlineTime = ''
        }
      },      // 上线类型变化清除时间
      handleSelectionChange (all) {
        this.all = all
      }, // 内容信息表格全选
      checkLink (link) {
        var strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
        var reg = new RegExp(strRegex)
        if (link !== '') {
          if (!reg.test(link)) {
            this.$message({
              showClose: true,
              message: '请输入有效的url地址',
              type: 'error'
            })
          } else {
            window.open(link)
          }
        } else {
          this.$message({
            showClose: true,
            message: '请输入有效的url地址',
            type: 'error'
          })
        }
      }, // 验证链接
      // 选择单品
      simpleCheck () {
        if (this.branchId === 1) {
          if (this.infoForm.branchId === '') {
            this.$message({
              showClose: true,
              message: '请先选择分公司',
              type: 'error'
            })
            return false
          }
        }
        // 重置
        this.formSimple.ID = ''
        this.formSimple.name = ''
        this.formSimple.type1 = ''
        this.formSimple.type2 = ''
        this.formSimple.type3 = ''
        this.formSimple.brand = ''
        this.tableData_S.content = []
        this.tableData_S.currentPage = 1
        this.tableData_S.total = ''
        this.dialogSimple = true
      }, // 按钮
      simpleList () {
        this.tableData_S.isLoading = true
        const queryData = {
          branchId: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
          fourCate: this.formSimple.brand,
          page: this.tableData_S.currentPage,
          pageSize: this.tableData_S.pageSize,
          hmpId: this.formSimple.ID,
          hmpName: this.formSimple.name,
          firstCate: this.formSimple.type1,
          thirdCate: this.formSimple.type3,
          secondCate: this.formSimple.type2,
          showType: [1, 3, 30]
        }
        getInfo.searchProduct(queryData, (res) => {
          console.log(res, '商品列表')
          if (res.message === 'ok' && res.content.content !== null) {
            this.tableData_S.isLoading = false
            if (this.contentTable.length !== 0) {
              for (var i = 0; i < res.content.content.length; i++) {
                let a = true
                for (var j = 0; j < this.contentTable.length; j++) {
                  if (res.content.content[i].hmpId === this.contentTable[j].productId) {
                    res.content.content[i].name = 'cancel'
                    a = false
                  } else {
                    res.content.content[i].name = 'add'
                  }
                  if (a === false) {
                    j = this.contentTable.length
                  }
                }
              }
            } else {
              res.content.content.forEach(function (item, index) {
                item.name = 'add'
              })
            }
            this.tableData_S.content = res.content.content
            this.tableData_S.total = res.content.count
          } else if (res.message === 'ok' && res.content.content === null) {
            this.tableData_S.total = ''
            this.tableData_S.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: '查询失败',
              type: 'error'
            })
            this.tableData_S.total = ''
            this.tableData_S.isLoading = false
          }
        })
      },  // 查询
      handleCurrentChange_S (val) {
        this.tableData_S.currentPage = val
        this.simpleList()
      }, // 分页
      checkType2 (val) {
        this.formSimple.productList2 = []
        this.formSimple.type2 = ''
        this.formSimple.brand = ''
        getInfo.getCate({pid: val}, (res) => {
          if (res.message === 'ok') {
            this.formSimple.productList2 = res.content
          }
        })
      },
      checkType3 (val) {
        this.formSimple.productList3 = []
        this.formSimple.type3 = ''
        getInfo.getCate({pid: val}, (res) => {
          if (res.message === 'ok') {
            this.formSimple.productList3 = res.content
          }
        })
        getInfo.getBrand({cateId: val}, (res) => {
          if (res.message === 'ok') {
            this.formSimple.brandList = res.content
          }
        })
      },
      handleChange_S (all) {
        this.tableData_S.all = all
      },
      handleSelectionChange_S (all) {
        this.tableData_S.all = all
      },
      add (index, row, event) {
        row.name = 'cancel'
        this.$refs.multipleTable.toggleRowSelection(row, true)
        if (this.contentTable.indexOf(row) === -1) {
          const newItem = {
            productType: 1,
            productId: row.hmpId,
            productName: row.hmpName
          }
          this.contentTable.push(newItem)
        }
      },
      celadd (index, row) {
        row.name = 'add'
        this.$refs.multipleTable.toggleRowSelection(row, false)
        const leng = this.contentTable.length
        for (var i = 0; i < leng; i++) {
          var element = this.contentTable[i]
          if (Number(element.productId) === Number(row.hmpId)) {
            this.contentTable.splice(i, 1)
          }
        }
      },
      lotAdd () {
//      状态变为撤销
        this.tableData_S.content.forEach((item1, index1) => {
          this.tableData_S.all.forEach(function (item, index) {
            if (item1.hmpId === item.hmpId) {
              item1.name = 'cancel'
            }
          })
        })
//      添加进去
        this.tableData_S.all.forEach((item, index) => {
          if (this.contentTable.indexOf(item) === -1) {
            const newItem = {
              productType: 1,
              productId: item.hmpId,
              productName: item.hmpName
            }
            this.contentTable.unshift(newItem)
          }
        })
        this.tableData_S.all = []
      },
      isCheck (row, index) {
        return row.name === 'add'
      },
      // 选择套餐
      checkCombo () {
        if (this.branchId === 1) {
          if (this.infoForm.branchId === '') {
            this.$message({
              showClose: true,
              message: '请先选择分公司',
              type: 'error'
            })
          } else {
            this.dialogCombo = true
            // 重置
            this.formCombo.ID = ''
            this.formCombo.name = ''
            this.tableData_T.content = []
            this.tableData_T.currentPage = 1
            this.tableData_T.total = ''
          }
        } else {
          this.dialogCombo = true
          // 重置
          this.formCombo.ID = ''
          this.formCombo.name = ''
          this.tableData_T.content = []
          this.tableData_T.currentPage = 1
          this.tableData_T.total = ''
        }
      },   // 按钮
      comboList () {
        this.tableData_T.isLoading = true
        const queryData = {
          limit_branch_id: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
          page: this.tableData_T.currentPage,
          pageSize: this.tableData_T.pageSize,
          promotion_id: this.formCombo.ID,
          promotion_name: this.formCombo.name,
          promotion_type: 1,
          sortType: 2,
          orderBy: 2,
          check_status: '5,6' // 关联进行中，未开始
        }
        column.modules.hdList(queryData, (res) => {
          if (res.message === 'ok' && res.content.list) {
            this.tableData_T.isLoading = false
            if (this.contentTable.length !== 0) {
              for (var i = 0; i < res.content.list.length; i++) {
                let a = true
                for (var j = 0; j < this.contentTable.length; j++) {
                  if (res.content.list[i].promotion_id === this.contentTable[j].productId) {
                    res.content.list[i].name = 'cancel'
                    a = false
                  } else {
                    res.content.list[i].name = 'add'
                  }
                  if (a === false) {
                    j = this.contentTable.length
                  }
                }
              }
            } else {
              res.content.list.forEach(function (item, index) {
                item.name = 'add'
              })
            }
            this.tableData_T.content = res.content.list
            this.tableData_T.total = res.content.count
          } else if (res.message === 'ok' && !res.content.list) {
            this.tableData_T.content = []
            this.tableData_T.isLoading = false
            this.tableData_T.total = ''
          } else {
            this.$message({
              showClose: true,
              message: '查询失败',
              type: 'error'
            })
            this.tableData_T.content = []
            this.tableData_T.isLoading = false
            this.tableData_T.total = ''
          }
        })
      },    // 查询
      handleCurrentChange_T (val) {
        this.tableData_T.currentPage = val
        this.comboList()
      }, // 分页
      lotAdd_T () {
//      状态变为撤销
        this.tableData_T.content.forEach((item1, index1) => {
          this.tableData_T.all.forEach(function (item, index) {
            if (item1.id === item.id) {
              item1.name = 'cancel'
            }
          })
        })
//      添加进去
        this.tableData_T.all.forEach((item, index) => {
          if (this.contentTable.indexOf(item) === -1) {
            const newItem = {
              productType: 2,
              productId: item.promotion_id,
              productName: item.promotion_name
            }
            this.contentTable.unshift(newItem)
          }
        })
        this.tableData_T.all = []
      },
      handleSelectionChange_T (all) {
        this.tableData_T.all = all
      },
      handleChange_T (all) {
        this.tableData_T.all = all
      },
      add_T (index, row, event) {
        if (event.target.innerText === '添加') {
          row.name = 'cancel'
          this.$refs.multipleTable2.toggleRowSelection(row, true)
          if (this.contentTable.indexOf(row) === -1) {
            const newItem = {
              productType: 2,
              productId: row.promotion_id,
              productName: row.promotion_name
            }
            this.contentTable.unshift(newItem)
          }
        } else {
          row.name = 'add'
          this.$refs.multipleTable2.toggleRowSelection(row, false)
          const index = this.contentTable.indexOf(row)
          this.contentTable.splice(index, 1)
        }
      },
      isCheck_T (row, index) {
        return row.name === 'add'
      },
//    内容信息表格操作：上移，下移...
      omit (index, row) {
        this.contentTable.splice(index, 1)
      },
      lotDelete () {
        this.all.forEach((item1, index1) => {
          this.contentTable.forEach((item, index) => {
            if (item1.productId === item.productId) {
              const index = this.contentTable.indexOf(item)
              this.contentTable.splice(index, 1)
            }
          })
        })
      },
      top (index, row) {
        this.contentTable.splice(0, 0, row)
        this.contentTable.splice(index + 1, 1)
      },
      moveT (index, row) {
        this.contentTable.splice(index - 1, 0, row)
        this.contentTable.splice(index + 1, 1)
      },
      moveB (index, row) {
        this.contentTable.splice(index + 2, 0, row)
        this.contentTable.splice(index, 1)
      },
//    按钮组
      cancel () {
        if (!this.data) {
          this.$store.dispatch('delTab', {id: 'contenta_add'})
        } else {
          this.$store.dispatch('delTab', {id: 'contenta_edit'})
        }
      },
      submit (event, name) {
        this.$refs[name].validate((valid) => {
          if (!valid) {
            return false
          } else {
            if (this.infoForm.name === '') {
              this.$message({
                showClose: true,
                message: '请输入内容名称',
                type: 'error'
              })
              return false
            }
            if (this.branchId === 1) {
              if (this.infoForm.branchId === '') {
                this.$message({
                  showClose: true,
                  message: '请选择分公司',
                  type: 'error'
                })
                return false
              }
            }
            if (this.lineForm.onlineMode === '2') {
              if (this.lineForm.onlineTime === '') {
                this.$message({
                  showClose: true,
                  message: '请选择定时时间',
                  type: 'error'
                })
                return false
              } else if (new Date(this.lineForm.onlineTime).getTime() < new Date().getTime()) {
                this.$message({
                  showClose: true,
                  message: '定时时间应晚于当前时间',
                  type: 'error'
                })
                this.lineForm.onlineTime = ''
                return false
              }
            }
            if (this.infoForm.contentMode === '2' && this.linkForm.link === '') {
              this.$message({
                showClose: true,
                message: '请填写链接',
                type: 'error'
              })
              return false
            }
            if (this.infoForm.contentMode === '1' && this.contentTable.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择商品或套餐',
                type: 'error'
              })
              return false
            }
            if (!this.data) {
              var _data = {}
              _data.advertImage = this.imageUrl
              _data.advertMain = this.infoForm.advertMain
              _data.titleVice = this.infoForm.titleVice
              _data.advertVice = this.infoForm.advertVice
              _data.contentMode = this.infoForm.contentMode
              _data.branchId = this.branchId === 1 ? this.infoForm.branchId : this.branchId
              _data.comment = this.infoForm.comment
              _data.contentMode = this.infoForm.contentMode
              _data.createUser = this.userName
              _data.sortType = this.infoForm.sortType
              _data.name = this.infoForm.name
              _data.onlineComment = this.lineForm.onlineComment
              _data.onlineMode = this.lineForm.onlineMode
              _data.onlineTime = this.lineForm.onlineTime
              _data.link = this.linkForm.link
              _data.newContentDatas = this.contentTable
              _data.pc = this.viewForm.pc
              _data.hpt = this.viewForm.hpt
              _data.hft = this.viewForm.hft
              _data.type = event.target.innerText === '提交' ? 1 : 0
              column.content.create(_data, res => {
                if (res.message === 'ok') {
                  this.$message({
                    showClose: true,
                    message: '创建成功',
                    type: 'success'
                  })
                  this.$store.dispatch('delTab', {id: 'contenta_add'})
                  this.$store.dispatch('contentState', this.$store.state.updateState.contentState + 1)
                  this.$store.dispatch('contentCheckState', this.$store.state.updateState.contentCheckState + 1)
                }
              })
            } else {
              const _data = {}
              _data.branchId = this.branchId === 1 ? this.infoForm.branchId : this.branchId
              _data.advertImage = this.imageUrl
              _data.advertVice = this.infoForm.advertVice
              _data.titleVice = this.infoForm.titleVice // 副标题
              _data.advertMain = this.infoForm.advertMain
              _data.contentMode = this.infoForm.contentMode
              _data.comment = this.infoForm.comment
              _data.updateUser = this.userName
              _data.sortType = this.infoForm.sortType
              _data.name = this.infoForm.name
              _data.onlineComment = this.lineForm.onlineComment
              _data.onlineMode = this.lineForm.onlineMode
              _data.id = this.data.id
              _data.link = this.linkForm.link
              _data.newContentDatas = this.contentTable
              _data.pc = this.viewForm.pc
              _data.hpt = this.viewForm.hpt
              _data.hft = this.viewForm.hft
              _data.onlineTime = this.lineForm.onlineTime
              _data.type = event.target.innerText === '暂存' ? 0 : this.data.state
              column.content.edit(_data, res => {
                if (res.message === 'ok') {
                  this.$message({
                    showClose: true,
                    message: '编辑成功',
                    type: 'success'
                  })
                  this.$store.dispatch('delTab', {id: 'contenta_edit'})
                  this.$store.dispatch('contentState', this.$store.state.updateState.contentState + 1)
                  this.$store.dispatch('contentCheckState', this.$store.state.updateState.contentCheckState + 1)
                }
              })
            }
          }
        })
      },
      editInto (id) {
        column.content.detail({id: id, type: 2}, res => {
          console.log(res, '内容的详情')
//      基本信息
          this.infoForm.name = res.content.name
          this.infoForm.advertMain = res.content.advertMain
          this.infoForm.titleVice = res.content.titleVice
          this.infoForm.advertVice = res.content.advertVice
          this.imageUrl = res.content.advertImage
          this.infoForm.comment = res.content.comment
          this.infoForm.branchId = res.content.branchId
          this.infoForm.contentMode = String(res.content.contentMode)
          this.infoForm.sortType = res.content.sortType
//      上线信息
          this.lineForm.onlineMode = String(res.content.onlineMode)
          this.lineForm.onlineComment = res.content.onlineComment
          this.lineForm.onlineTime = res.content.onlineTime
//      赋值链接
          if (res.content.contentMode === 2) {
            this.linkForm.link = res.content.link
          }
//      赋值页面
          if (res.content.contentMode === 3) {
            res.content.pc === '' ? this.viewForm.pc = '' : this.viewForm.pc = res.content.pc
            res.content.hft === '' ? this.viewForm.hft = '' : this.viewForm.hft = res.content.hft
            res.content.hpt === '' ? this.viewForm.hpt = '' : this.viewForm.hpt = res.content.hpt
          }
//      表格赋值
          this.contentTable = res.content.newContentDatas
        })
      }  // 编辑进入赋值
    },
    computed: {
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      userName: function (state) {
        return this.$store.state.user.info.user_name
      }
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.fileUrl = 'http://' + apiHost.newCms + ':20000' + apiURL.content_upload // 导入表格
      this.imgAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.upLoadImage
      column.content.view({cliendId: 1}, (res) => {
        this.pcList = res.content.pageInfo
      }) // pc
      column.content.view({cliendId: 2}, (res) => {
        this.hptList = res.content.pageInfo
      }) // 惠配通
      column.content.view({cliendId: 3}, (res) => {
        this.hftList = res.content.pageInfo
      }) // 惠付通
      getInfo.getCate({pid: 0}, (res) => {
        if (res.message === 'ok') {
          this.formSimple.productList1 = res.content
        }
      })
      this.data = this.$store.state.tab.uid
      if (this.data) {
        this.editInto(this.data.id)
        if (this.data.state !== 1) {
          this.isDraft = false
        }
      }
    }
  }
</script>
<style>
  .daoru .el-upload-list {
    display: none;
  }
</style>
